<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>大纲生成器</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
    <style>
        body {
            display: flex;
            font-family: Arial, sans-serif;
        }
        #editor {
            width: 50%;
            padding: 20px;
            border-right: 1px solid #ccc;
        }
        #result {
            width: 50%;
            padding: 20px;
        }
        #outline-input {
            width: 100%;
            height: 200px;
            padding: 10px;
            margin-bottom: 10px;
            resize: none; /* 禁止调整大小 */
        }
        #execute-btn {
            padding: 10px;
        }
        .result-item {
            margin-bottom: 20px;
        }
        .result-title {
            font-weight: bold;
        }
        .result-content {
            color: gray; /* 内容采用灰色显示 */
        }
    </style>
</head>
<body>
    <div id="editor">
        <h1>编辑大纲</h1>
        <textarea id="outline-input" placeholder="每行输入一个大纲标题，支持Markdown格式..."></textarea>
        <button id="execute-btn">执行</button>
    </div>
    <div id="result">
        <h1>结果显示</h1>
        <div id="output"></div>
    </div>

    <script>
        $('#execute-btn').click(function() {
            const outlines = $('#outline-input').val().trim().split('\n');
            let outputHtml = '';
            let results = [];
            let requests = []; // 存储所有请求

            // 过滤掉空行
            const filteredOutlines = outlines.map(line => line.trim()).filter(line => line !== '');

            // 发起所有请求
            filteredOutlines.forEach(function(key, index) {
                // 去除Markdown格式，提取文本
                const plainTextKey = key.replace(/^(#{1,6})\s*/, '').trim();

                let request = $.get('/get_value/', { key: plainTextKey }, function(data) {
                    results[index] = {
                        title: key, // 保留原始Markdown格式
                        content: data.value || '未找到对应值'
                    };
                });
                requests.push(request);
            });

            // 等待所有请求完成
            $.when.apply($, requests).done(function() {
                // 生成输出HTML，保持顺序
                results.forEach(function(result) {
                    const markdownTitle = result.title;
                    const markdownContent = result.content;

                    // 将Markdown格式转换为HTML
                    const htmlTitle = marked(markdownTitle);
                    const htmlContent = marked(markdownContent);

                    outputHtml += `
                        <div class="result-item">
                            <div class="result-title">${htmlTitle}</div>
                            <div class="result-content">${htmlContent}</div>
                        </div>`;
                });
                $('#output').html(outputHtml);
            });
        });
    </script>
</body>
</html>